<style lang="scss" scoped>
    @import '../../css/training.scss';
    .input{width: 340px;height: 42px;}
    .undertext{height:20px;color:lightgrey;line-height: 20px;}
    .success-box{width: 100%;}
    .success{width: 200px;margin: 0 auto;padding: 150px 0px;text-align: center;}
    .success-icon{width: 200px;height:200px;}
    .success-txt{color: $mc3;}
    .btn-active{background: $mco;color:#fff;}
    .btn-or{width: 140px;}

    .header{height: 80px;background: #fff;}
    .hs-logo{background: #3f66f6; height: 80px; color: #fff;text-align: center;line-height: 70px; width: 200px;}
    .hs-logo a{font-size:0px;}
    .hs-logo a img{width: 139px;height:33px;}

    .add-box{width: 1200px;height: 800px;margin: 0 auto;background: #fff;top:50%;margin-top: 30px;}

    .add-content{padding: 30px;background: #fff;border:none;}
    .next-btn{margin-top: 12px;margin-left: 200px;}
    .btn-active{background: #3f66f6;color:#fff;}
    .btn-or{width: 140px;}

    .down-box{width: 100%;}
    .com-box{ overflow-y: auto;}
    .step-head .color-weight{color:#3d404d;}
    .step-head{padding: 24px 20px 0 20px;background: #fff;position: relative;font-size: 18px;font-weight: bold;margin-left: -20px;}
    .step-one{float: left;background: #f7f8fa;width:150px;height: 40px;line-height: 40px;text-align: center;margin-right: 58px;color: #ccc;}
    .triangel-left{display: inline-block;width: 0;height: 0;border:20px solid rgba(1,1,1,0);border-left: 20px solid #f7f8fa;position: absolute;top:24px;left: 168px;}
    .triangel-right{display: inline-block;width: 0;height: 0;border:20px solid #f7f8fa;border-left: 20px solid rgba(1,1,1,0);position: absolute;top:24px;left: 180px;color:#ccc;}
    .step-two{float: left;width:150px;background: #f7f8fa;height: 40px;line-height: 40px;margin-right: 58px;padding-left: 5px;margin-left: -8px;color: #ccc;}
    .step-three{margin-left: 407px;background: #f7f8fa;height: 40px;line-height: 40px;color: #ccc;}
    .triangel-left2{display: inline-block;width: 0;height: 0;border:20px solid rgba(1,1,1,0);border-left: 20px solid #f7f8fa;position: absolute;top:24px;left: 375px;}
    .triangel-r{display: inline-block;width: 0;height: 0;border:20px solid #f7f8fa;border-left: 20px solid rgba(1,1,1,0);position: absolute;top:24px;left: 387px;}

    .agreement-info{color: #3f66f6;text-decoration: underline}
</style>
<template>
    <section class="com-box" >
        <section class="header">
            <section class="hs-logo">
                <a href=""><img src="http://jhsy-img.caizhu.com/sass/images/ic-logo-2.png" alt="logo"></a>
            </section>
        </section>
        <section class="down-box">

        </section>
        <section class="add-box">
            <section class="add-content">
                <div class="step-head">
                    <span class="step-one">添加手机号码</span>
                    <span class="triangel-left"></span>
                    <span class="triangel-right"></span>
                    <div class="step-two" :class="{'color-weight':step== 1}">完善信息</div>
                    <span class="triangel-left2"></span>
                    <span class="triangel-r"></span>
                    <div class="step-three" :class="{'color-weight':step ==2}">注册成功</div>
                </div>

                <section v-if="step == 1" class="mt40">
                    <el-form :model="form" ref="form" :rules="rules" label-width="200px" class="demo-ruleForm">
                        <el-form-item
                                label="企业（团队）名称"
                                prop="CompanyName">
                            <el-input class="input" v-model="form.CompanyName" placeholder="请输入企业（团队）名称"></el-input>
                        </el-form-item>
                        <el-form-item label="所在地" class="clearfix" required>
                            <el-col :span="8" >
                                <el-form-item prop="Province">
                                    <el-select v-model="form.Province" @change="areaChange(one)" placeholder="请选择省份" type="1">

                                        <el-option :label="one.name" :value="one.code" :key="one.code" v-for="one in areaObj"></el-option>

                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8"  :offset="2">
                                <el-form-item prop="City">
                                    <el-select v-model="form.City" placeholder="请选择城市"  type="2">
                                        <el-option :label="one.name" :value="one.code" :key="one.code" v-for="one in curCity">{{one.name}}</el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="行业类型" required>
                            <el-col :span="8" >
                                <el-form-item prop="MainIndustryID">
                                    <el-select placeholder="请选择行业大类" v-model="form.MainIndustryID" @change="MainIndusChange(one,form.MainIndustryID)">

                                        <el-option :label="one.IndustryName" :value="one.IndustryID" :key="one.IndustryID" v-for="one in oneMenu"></el-option>
                                        console.log(one.IndustryName)

                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" :offset="2">
                                <el-form-item prop="SubIndustryID">
                                    <el-select  placeholder="请选择行业" v-model="form.SubIndustryID"  prop="smalltread">

                                        <el-option :label="one.IndustryName" :value="one.IndustryID" :key="one.IndustryID" v-for="one in twoMenu"></el-option>

                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="人员规模" prop="Scale">
                            <el-select  placeholder="请选择企业（团队）规模" v-model="form.Scale" prop="team">
                                <el-option label="50人以下" value="1" key="1"></el-option>
                                <el-option label="50-100人" value="2" key="2"></el-option>
                                <el-option label="100-200人" value="3" key="3"></el-option>
                                <el-option label="200-500人" value="4" key="4"></el-option>
                                <el-option label="500人以上" value="5" key="5"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="登录密码" prop="Password" >
                            <el-input class="input" style="height: 40px;"  type="password" v-model="form.Password" auto-complete="off" maxlength="16" placeholder="请输入密码"></el-input>
                            <section class="undertext" v-show="show"><span class="fs-12">8-16个字符，不能包含空格，必须包含字母、数字、符号中至少两种</span></section>
                        </el-form-item>
                        <el-form-item label="联系人姓名"  prop="ContactUser">
                            <el-input class="input" v-model="form.ContactUser" placeholder="请输入个人姓名" maxlength="4"></el-input>
                        </el-form-item>

                        <el-form-item prop="Email" label="联系人邮箱">
                            <div class="cl-child">
                                <el-input v-model="form.Email" placeholder="请输入联系人邮箱"></el-input>
                            </div>
                        </el-form-item>

                        <el-form-item label="邀请码">
                            <el-input class="input" placeholder='选填' v-model="form.InviteCode"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox label="1" v-model="checkedFlag">已阅读 </el-checkbox>
                            <span>《<a class="agreement-info" href="/register/agreement-info" target="_blank">静好学堂服务协议</a>》</span>
                        </el-form-item>
                        <el-button class="next-btn btn-active btn-or" @click="goNext(form)">下一步</el-button>
                    </el-form>
                </section>


                <section v-if="step == 2">
                    <section class="success-box">
                        <section class="success">
                            <img class="success-icon" src="http://jhsy-img.caizhu.com/sass/images/ic-default.png" alt="">
                            <p class="fs-18 mt20 mb20 success-txt">恭喜您，新企业注册成功</p>
                            <el-button class="btn-active btn-or" @click="goto('/')">完成注册</el-button>
                        </section>
                    </section>
                </section>
            </section>
        </section>

    </section>

</template>

<script>

	import qs from 'qs'
    import {province, city} from '../../../static/js/area.js'
	import {industry00,industry01} from 'js/industry'

    console.log(province);

    var areaObj = {};
    areaObj;
    (function(){
        province.forEach(function(one){
            one.city = [];
            areaObj[one.code] = one;
        });

        city.forEach(function(one){
            areaObj[one.parentId].city.push(one);
        })

        console.log(areaObj);

    })();

	export default{
		data: function(){
            let validPasswold = (rule, value,callback)=>{ // 只能手机号码
                if(!(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\S]{8,16}$/.test(value))){
                    callback(new Error('8-16个字符，不能包含空格，必须包含字母、数字、符号中至少两种'))
                    return false
                }else{
                    callback();
                }

            };
			return {
				step: 1,
                province: province,
                areaObj: areaObj,
                curCity: [],

//				active: 2,
								active: '3', // 假设数据
				show: true,

				one : {},   //   industry00
				two : {},   //   industry01
				oneMenu : [],
				twoMenu: [],

                checkedFlag: true,



				form:{

					CompanyName : '',
					Province: '',
					City: '',
					MainIndustryID: '',
					SubIndustryID: '',
					Scale: '',  // 1: 50人以下 2:50-100 3:100-200 4:200-500 5:500人以上
					ContactUser	: '',
					ContactPhone:'',
					InviteCode:'',
					Email:'',
					Password:'',


				},
                rules:{
					CompanyName: [
						{ required: true, message: '请输入企业（团队）名称', trigger: 'blur' },
					],
					Province:[
						{required: true, message: '请选择所在省份', trigger: 'change' }
					],
					City: [
						{required: true, message: '请选择所在城市', trigger: 'change'}
					],
					MainIndustryID:[
						{required: true, message: '请选择行业大类', trigger: 'change' }
					],
					SubIndustryID:[
						{required: true, message: '请选择行业', trigger: 'change' }
					],
					Scale: [
						{required: true, message: '请选择企业（团队）规模', trigger: 'blur'}
					],
					ContactUser: [
						{required: true, message: '请填写身份证上姓名', trigger: 'blur'}
					],
					CompanyWeb:[
						{required: true, message: '请填写企业网址', trigger: 'blur'}
					],
					Email:[
						{required: true, message: '请填写企业邮箱', trigger: 'blur'},
						{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
					],
					Password:[
						{required: true, message: '请输入密码', trigger: 'blur'},
                        { trigger: 'blur', validator: validPasswold }
                    ],

//					InviteCode:[
//						{required: true, message: '请输入邀请码',trigger: 'blur', }
//                    ],
                }
            }
		},
		mixins: [mixinMethods],
		methods: {
            areaChange: function(one){
				if(areaObj[this.form.Province]){
					this.form.City = '';
					this.curCity = areaObj[this.form.Province].city;      //
				}
            },
			goNext:function(formName){
                if(this.checkedFlag!=true){
                    this.$message.error('您还未勾选阅读服务协议')
                    return
                }
                let self = this;
//
//                let ContactPhone = this.$route.query.ContactPhone;
//				let InviteCode = this.$route.query.inviteCode;

				this.$refs.form.validate((valid) => {
					if (valid) {
						console.log(this.form);

						axios.post('/com/company/register', qs.stringify({

							CompanyName:this.form.CompanyName,
							Scale:this.form.Scale,
							ContactUser:this.form.ContactUser,
							ContactPhone: '',
							Password:this.form.Password,
							MainIndustryID:this.form.MainIndustryID,
							SubIndustryID:this.form.SubIndustryID,
							Email:this.form.Email,
							Province:this.form.Province,
							city:this.form.City,
							InviteCode:this.form.InviteCode,

                        })).then( (res) => {
                            var d = res.data;
                            if(d.flag == 1){

                            	console.log(d);

									this.step = 2;


                            	this.$message.success('注册成功');



                            }else{
                            	this.$message.error(d.msg);
                            }
                        } )


					} else {
						this.$message.error('请填写完整信息之后在提交！');
					}
				});
            },

            initPage(){
//                let InviteCode = this.$route.query.inviteCode;
//                console.log(InviteCode);
            },

			MainIndusChange(one,id){  //二级联动
				var self =this;

				let i =one[id].IndustryID;
				self.form.SubIndustryID = '';
				self.twoMenu = self.two[i];
			},
			compare(prop){         //  排序方法;
				return function (obj1, obj2) {
					var val1 = obj1[prop];
					var val2 = obj2[prop];
					if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
						val1 = Number(val1);
						val2 = Number(val2);
					}
					if (val1 < val2) {
						return -1;
					} else if (val1 > val2) {
						return 1;
					} else {
						return 0;
					}
				}
			},
			opeData(){
				var self = this;
				self.one = industry00;  // 引入js
				self.two = industry01;

				var arr = [];
				for(var key in industry00){
					arr.push(industry00[key]);
				}
				self.oneMenu = arr.sort(self.compare("IndustryID"));
				self.twoMenu = self.two[self.oneMenu[0].IndustryID];  //  初始化页面时，默认第一个一级菜单;
			},



		},
		mounted: function(){
            this.areaChange();
            this.opeData();
			this.initPage();


			/*axios.post('/xxx', qs.stringify({})).then( (res) => {
                var d = res.data;
                if(d.flag == 1){
                }
            } )*/
		}
	}


</script>
